import { Card, Breadcrumb, Row, Col, Button } from 'antd'
import { Link } from 'react-router-dom'
import './index.scss'
import Center from '@/components/Center'
import ShowChart from './components/ShowChart'
import { useState } from 'react'
import ProcessModal from './components/ProcessModal'
import SolutionModal from './components/SolutionModal'
import ReferModal from './components/ReferModal'
import ReferSolution from './components/ReferSolution'
import {
  FileSearchOutlined,
} from '@ant-design/icons'

const Solution = () => {


  // 弹出框1
  const [isProcessModalOpen, setIsProcessModalOpen] = useState(false)
  const handleProcessModalCancel = () => {
    setIsProcessModalOpen(false)
  }
  const chooseSolution = () => {
    setIsProcessModalOpen(true)
  }

  const [isSolutionOpen, setIsSolutionOpen] = useState(false)
  const [id1, setId1] = useState(0)
  const [data1, setData1] = useState([])
  const openSolution = (process_id) => {
    setIsSolutionOpen(true)
    setId1(process_id)
  }

  const closeSolution = (data1) => {
    if (data1) {
      console.log(data1)
      setData1(data1)
      updateMinMax(data1)
    }
    setIsSolutionOpen(false)
  }


  // 弹出框2
  const [isReferOpen, setIsReferOpen] = useState(false)
  const chooseRefer = () => {
    setIsReferOpen(true)
  }
  const handleReferModalCancel = () => {
    setIsReferOpen(false)
  }

  const [isReferSolutionOpen, setIsReferSolutionOpen] = useState(false)
  const [name, setName] = useState('')
  const [data2, setData2] = useState([])

  const openReferSolution = (name) => {
    setIsReferSolutionOpen(true)
    setName(name)
  }

  const closeReferSolution = (data2) => {
    if (data2) {
      console.log(data2)
      setData2(data2)
      updateMinMax(data2)
    }
    setIsReferSolutionOpen(false)
  }

  const [minMax, setMinMax] = useState({
    minNum: 99999999,
    minDist: 99999999,
    minTime: 99999999,
    minWait: 99999999,
    minDelay: 99999999,
    maxNum: -1,
    maxDist: -1,
    maxTime: -1,
    maxWait: -1,
    maxDelay: -1,
  })

  const updateMinMax = (data) => {
    let obj = {
      ...minMax
    }
    if (data) {
      for (let item of data) {
        if (item.num < obj.minNum) {
          obj.minNum = item.num
        }
        if (item.dist < obj.minDist) {
          obj.minDist = item.dist
        }
        if (item.time < obj.minTime) {
          obj.minTime = item.time
        }
        if (item.wait < obj.minWait) {
          obj.minWait = item.wait
        }
        if (item.delay < obj.minDelay) {
          obj.minDelay = item.delay
        }
        if (item.num > obj.maxNum) {
          obj.maxNum = item.num
        }
        if (item.dist > obj.maxDist) {
          obj.maxDist = item.dist
        }
        if (item.time > obj.maxTime) {
          obj.maxTime = item.time
        }
        if (item.wait > obj.maxWait) {
          obj.maxWait = item.wait
        }
        if (item.delay > obj.maxDelay) {
          obj.maxDelay = item.delay
        }
      }
    }
    setMinMax(obj)

  }



  return (
    <div>
      <Card
        title={
          <Breadcrumb items={[
            { title: <Link to={'/'}>首页</Link> },
            { title: '解集比较' },
          ]}
            className='breadcrumb'
          />
        }
      >
        <Row gutter={16} className='solutionRow'>
          <Col className="gutter-row" span={12}>
            <div className='solutionCol'>
              <Center>
                <Button type='primary'
                  style={{
                    marginTop: 10,
                    marginBottom: 15
                  }}
                  icon={<FileSearchOutlined />}
                  onClick={chooseSolution}
                >选择解决方案</Button>
              </Center>
              <div className='chart'>
                <ShowChart data={data1} id={1} minMax={minMax} />
              </div>
            </div>
          </Col>
          <Col className="gutter-row" span={12}>
            <div className='solutionCol'>
              <Center>
                <Button type='primary'
                  style={{
                    marginTop: 10,
                    marginBottom: 15,
                    backgroundColor: 'red'
                  }}
                  icon={<FileSearchOutlined />}
                  onClick={chooseRefer}
                >选择参考解集</Button>
              </Center>
              <div className='chart'>
                <ShowChart data={data2} id={2} minMax={minMax} />
              </div>
            </div>
          </Col>
        </Row>

        <ProcessModal
          isProcessModalOpen={isProcessModalOpen}
          handleProcessModalCancel={handleProcessModalCancel}
          openSolution={openSolution}
        />

        <ReferModal
          isReferOpen={isReferOpen}
          handleCancel={handleReferModalCancel}
          openReferSolution={openReferSolution}
        />


        {
          isSolutionOpen && <SolutionModal
            isSolutionOpen={isSolutionOpen}
            handleCancel={closeSolution}
            id={id1}
          />
        }

        {
          isReferSolutionOpen && <ReferSolution
            isReferSolutionOpen={isReferSolutionOpen}
            handleCancel={closeReferSolution}
            name={name}
          />
        }


      </Card>
    </div>
  )
}

export default Solution